<template>
  <div class="item-wrap flex-row-between" @click="handleShowDetail(item.id)">
    <p class="item-wrap-title flex-1 text-ellipsis">{{ item.matterTitle }}</p>
    <p v-if="showTip">{{ item.department }}</p>
  </div>
  <EventsDetail v-if="showDetail" :matter-id="matterId" @close="handleClose" />
</template>

<script lang="ts" setup>
import EventsDetail from './detail/EventsDetail.vue'
import { useShowDetail } from '../hooks/useShowDetail'
withDefaults(
  defineProps<{
    item: any
    showTip?: boolean
  }>(),
  {
    item: () => ({}),
    showTip: false,
  },
)
const { matterId, showDetail, handleShowDetail, handleClose } = useShowDetail()
</script>

<style lang="scss" scoped>
.item-wrap {
  height: vh(38);
  padding: 0 vw(16);
  margin-bottom: vh(12);
  line-height: vh(38);
  border-radius: 4px;
  background: linear-gradient(
    165.2deg,
    rgba(50, 116, 191, 0.1) 0%,
    rgba(124, 143, 161, 0.1) 100%
  );
  cursor: pointer;

  &:hover {
    color: var(--big-screent-hover-color);
    border: 1px solid var(--big-screent-hover-color);
  }

  &-title {
    min-width: vw(10);
  }
}
</style>
